<template>
  <div id="app">
  <div class="content">
  <router-view/>
  </div>
  <nav class="bottom">
  <router-link to="/" tag="div">商品列表</router-link>
  <router-link to="/shopcart" tag="div">购物车</router-link>
  </nav>
  </div>
  </template>
  <style>
  html,
  body {
  height: 100%;
  }
  body {
  margin: 0;
  font-size: 12px;
  box-sizing: border-box;
  }
  </style>
  <style scoped>
  #app {
  height: 100%;
  display: flex;
  flex-direction: column;
  }
  .content {
  flex: 1;
  overflow-y: scroll;
  }
  .bottom {
  height: 40px;
  display: flex;
  border-top: 1px solid #ccc;
  }
  .bottom > div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color:#444;
}
.bottom > div:not(:last-child) {
border-right: 1px solid #ccc;
}
.bottom > div.router-link-exact-active {
color:#F18741;
font-weight:bold;
background:#FEF5EF;
}
</style>